<template>
  <div class="line_chart" :id="idName">区域图</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, toRefs, computed, onMounted, watch } from "vue";
const GRADIENTCOLOR = [
  ['rgba(128, 255, 165,0.3)', 'rgba(1, 191, 236,0)'],
  ['rgba(0, 221, 255,0.3)', 'rgba(77, 119, 255,0)'],
  ['rgba(55, 162, 255,0.3)', 'rgba(116, 21, 219,0)'],
  ['rgba(255, 0, 135,0.3)', 'rgba(135, 0, 157,0)'],
  ['rgba(255, 191, 0,0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(5, 25, 246, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(154, 96, 180, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(255, 0, 0, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(128, 140, 120,0.3)', 'rgba(1, 191, 236,0)'],
  ['rgba(0, 180, 255,0.3)', 'rgba(77, 119, 255,0)'],
  ['rgba(55, 192, 255,0.3)', 'rgba(116, 21, 219,0)'],
  ['rgba(255, 35, 135,0.3)', 'rgba(135, 0, 157,0)'],
  ['rgba(255, 68, 0,0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(5, 25, 87, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(154, 10, 180, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(35, 21, 0, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(128, 255, 165,0.3)', 'rgba(1, 191, 236,0)'],
  ['rgba(0, 221, 255,0.3)', 'rgba(77, 119, 255,0)'],
  ['rgba(55, 162, 255,0.3)', 'rgba(116, 21, 219,0)'],
  ['rgba(214, 0, 135,0.3)', 'rgba(135, 0, 157,0)'],
  ['rgba(222, 0, 45,0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(5, 25, 246, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(154, 96, 180, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(255, 177, 0, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(128, 140, 120,0.3)', 'rgba(1, 191, 236,0)'],
  ['rgba(255, 145, 255,0.3)', 'rgba(77, 119, 255,0)'],
  ['rgba(55, 192, 255,0.3)', 'rgba(116, 21, 219,0)'],
  ['rgba(255, 35, 135,0.3)', 'rgba(135, 0, 157,0)'],
  ['rgba(240, 150, 0,0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(15, 91, 87, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(58, 54, 180, 0.3)', 'rgba(224, 62, 76,0)'],
  ['rgba(53, 121, 0, 0.3)', 'rgba(224, 62, 76,0)'],
]
const props = defineProps({
  idName: {
    type: String,
    default: "barChart",
  },
  title: {
      type: String,
      default: "XXX区域图"
    },
  vm: {
      type: Object,
      default: function() {
        return {
          yAxis: "yAxis",
          names: "names",
          values: "values",
        };
      },
    }
});
let { idName, title, vm } = toRefs(props);
let option=ref({
  color: [
          '#80FFA5',
          '#00DDFF',
          '#37A2FF',
          '#FF0087',
          '#FFBF00',
          '#0519f6',
          '#9A60B4',
          '#ff0000'
        ],
        title: {
          text: "XXX区域图",
          left: "center",
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          y: 'bottom'
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "14%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: []
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [
          // {
          // 	name: 'Forest',
          // 	type: 'bar',
          // 	barGap: 0,
          // 	emphasis: {
          // 		focus: 'series'
          // 	},
          // 	data: [320, 332, 301, 334, 390]
          // },
        ]
})
const series = computed(() => {
	let listObj = vm.value.names;
	let values = vm.value.values;
  console.log(values)
	let seriesobj = [];

	for (let i=0;i<listObj.length;i++){
		let data = []
		for (let j=0;j<values.length;j++){
			data.push(values[j][i]);
		}
		let dict_type = {
      name: listObj[i],
          type: 'line',
          smooth: true,
          stack: 'Total',
          lineStyle: {
            width: 1
          },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          },
          // areaStyle: {
          //   opacity: 1,
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0,
          //       color: GRADIENTCOLOR[i][0]
          //     },
          //     {
          //       offset: 1,
          //       color: GRADIENTCOLOR[i][1]
          //     }
          //   ])
          // },
          data: data
        }
        seriesobj.push(dict_type);
	}
	return seriesobj;
});
let init_chart = () => {
	let optionObj = option.value;
	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}

  var seriesobj = series.value;
  optionObj.series = seriesobj;
  var xAxis = optionObj.xAxis[0];
  xAxis.data = vm.value.xAxis;
  if (xAxis.data.length>4){
    optionObj.axisLabel= {
      interval: 0, //使x轴文字显示全
      formatter: function (params) {
        let newParamsName = '';
        const paramsNameNumber = params.length; // 文字总长度
        const provideNumber = 4; //一行显示几个字
        const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          for (let p = 0; p < rowNumber; p++) {
            const start = p * provideNumber;
            const end = start + provideNumber;
            const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }
        return newParamsName;
      },
    }
  }
	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
onMounted(() => {
	setTimeout(()=>{
	 init_chart();
	},800)
});
</script>